<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Auth0 - JWT-Decode</title>
  </head>
  <body>
    <h2>Decoded:</h2>
    <pre><code id="js-decoded"></code></pre>
    <pre><code id="js-error1"></code></pre>
    <pre><code id="js-error2"></code></pre>
    <pre><code id="js-error3"></code></pre>
    <script type="importmap">
      {
        "imports": {
          "jwt-decode": "/esm/index.js"
        }
      }
    </script>
    <script type="module">
      import { jwtDecode } from "jwt-decode";

      const token =
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmb28iOiJiYXIiLCJleHAiOjEzOTMyODY4OTMsImlhdCI6MTM5MzI2ODg5M30.4-iaDojEVl0pJQMjrbM1EzUIfAZgsbK_kgnVyVxFSVo";
      document.querySelector("#js-decoded").textContent = prettyJSON(jwtDecode(token));

      try {
        jwtDecode("FAKE_TOKEN");
      } catch (error) {
        document.querySelector("#js-error1").textContent = error.message;
      }

      try {
        jwtDecode("FAKE.TOKEN2");
      } catch (error) {
        document.querySelector("#js-error2").textContent = error.message;
      }

      try {
        jwtDecode("FAKE.TOKEN");
      } catch (error) {
        document.querySelector("#js-error3").textContent = error.message;
      }

      function prettyJSON(data) {
        return JSON.stringify(data, null, 2);
      }
    </script>
  </body>
</html>
